<div class="dataTables_wrapper">
  <perfect-scrollbar>
    <!-- 基础模式 -->
    <table class="table dataTable table-hover" *ngIf="!columns.length; else advancedTableRef">
      <thead>
        <tr>
          <ng-content select="th"></ng-content>
        </tr>
      </thead>
      <ng-content select="tbody"></ng-content>
    </table>
    <!-- 高级模式 -->

    <ng-template #advancedTableRef>
      <table class="table dataTable table-hover advanced-table">
        <thead>
          <tr class="data-table-header">
            <th class="g-table-checkbox" *ngIf="selection">
              <m-checkbox
                [value]="selectedAll$ | async"
                (valueChange)="toggle($event, data)"
              ></m-checkbox>
            </th>
            <th
              *ngIf="result"
              class="sorting g-table-checkbox"
              [class.sorting]="sortable.includes('created_at')"
              [class.asc]="sort['created_at'] === 'asc'"
              [class.desc]="sort['created_at'] === 'desc'"
              (click)="clickHeader({ name: 'created_at' })"
            >
              <span>#</span>
            </th>
            <ng-container *ngFor="let column of columns">
              <th
                *ngIf="!column.hidden && !hideColumn.includes(column.name)"
                [style.width]="column.width"
                [class.sorting]="sortable.includes(column.name)"
                [class.asc]="sort[column.name] === 'asc'"
                [class.desc]="sort[column.name] === 'desc'"
                (click)="clickHeader(column)"
              >
                <span> {{ column.header || column.name }} </span>
              </th>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <tr class="data-table-row" *ngFor="let row of data; let index = index">
            <td *ngIf="selection">
              <m-checkbox
                [value]="selection.isSelected(row)"
                (valueChange)="toggle($event, [row])"
              ></m-checkbox>
            </td>
            <ng-container *ngIf="result">
              <td *ngIf="sort['created_at'] === 'desc'; else NoAscRef">
                {{ result.total - ((result.page - 1) * result.pageSize + index) }}
              </td>
              <ng-template #NoAscRef>
                <td>{{ (result.page - 1) * result.pageSize + index + 1 }}</td>
              </ng-template>
            </ng-container>

            <ng-container *ngFor="let column of columns">
              <ng-container *ngIf="!column.hidden && !hideColumn.includes(column.name)">
                <ng-container
                  *ngTemplateOutlet="
                    column.template;
                    context: row | assign: { $index: index, $implicit: row }
                  "
                ></ng-container>
              </ng-container>
            </ng-container>
          </tr>
        </tbody>
      </table>
    </ng-template>
  </perfect-scrollbar>
  <ng-content select="m-pagination"></ng-content>
  <ng-content select="ngb-pagination"></ng-content>
</div>
